{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>输入框</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>输入框允许在普通输入框左侧和右侧放置小图标，或者提供预设的标签。</p></article>





<section><header><h3>带图标</h3></header><article><div class="example">
  <div class="row">
    <div class="col-md-6">
      <div class="input-control has-icon-left">
        <input id="inputAccountExample1" type="text" class="form-control" placeholder="用户名">
        <label for="inputAccountExample1" class="input-control-icon-left"><i class="icon icon-user "></i></label>
      </div>
      <br>
      <div class="input-control has-icon-left has-icon-right">
        <input id="inputEmailExample1" type="email" class="form-control" placeholder="密码">
        <label for="inputEmailExample1" class="input-control-icon-left"><i class="icon icon-envelope "></i></label>
        <label for="inputEmailExample1" class="input-control-icon-right"><i class="icon icon-check"></i></label>
      </div>
      <br>
      <div class="input-control has-icon-right">
        <input id="inputPasswordExample1" type="password" class="form-control" placeholder="密码">
        <label for="inputPasswordExample1" class="input-control-icon-right"><i class="icon icon-key"></i></label>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-icon-left"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputAccountExample1"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"用户名"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputAccountExample1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-left"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-user "</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-icon-right"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputPasswordExample1"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"密码"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputPasswordExample1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-right"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-key"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-icon-left has-icon-right"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputEmailExample1"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"密码"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputEmailExample1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-left"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-envelope "</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputEmailExample1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-right"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-check"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>





















<section><header><h3>带标签</h3></header><article><div class="example">
  <div class="row">
    <div class="col-md-6">
      <div class="input-control has-label-left">
        <input id="inputAccountExample2" type="text" class="form-control" placeholder="">
        <label for="inputAccountExample2" class="input-control-label-left">用户名:</label>
      </div>
      <br>
      <div class="input-control has-label-left has-icon-right">
        <input id="inputEmailExample2" type="email" class="form-control" placeholder="">
        <label for="inputEmailExample2" class="input-control-label-left">邮箱:</label>
        <label for="inputEmailExample2" class="input-control-icon-right"><i class="icon icon-check"></i></label>
      </div>
      <br>
      <div class="input-control has-label-left has-label-right">
        <input id="inputPasswordExample2" type="password" class="form-control" placeholder="">
        <label for="inputPasswordExample2" class="input-control-label-left">密码:</label>
        <label for="inputPasswordExample2" class="input-control-label-right text-right text-success">安全!!!</label>
      </div>
      <br>
      <div class="input-control has-icon-left has-icon-right">
        <input id="inputGiftExample2" type="text" class="form-control" placeholder="礼品码">
        <label for="inputGiftExample2" class="input-control-icon-left"><i class="icon icon-gift"></i></label>
        <label for="inputPasswordExample2" class="input-control-label-right text-right text-red">享 8 折</label>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputAccountExample2"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputAccountExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-left"</span><span class="tag">&gt;</span><span class="pln">用户名:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left has-icon-right"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputEmailExample2"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputEmailExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-left"</span><span class="tag">&gt;</span><span class="pln">邮箱:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputEmailExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-right"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-check"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-icon-left has-icon-right"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputGiftExample2"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"礼品码"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputGiftExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-left"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-gift"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputPasswordExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-right text-right text-red"</span><span class="tag">&gt;</span><span class="pln">享 8 折</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left has-label-right"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputPasswordExample2"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputPasswordExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-left"</span><span class="tag">&gt;</span><span class="pln">密码:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputPasswordExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-right text-right text-success"</span><span class="tag">&gt;</span><span class="pln">安全!!!</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>左侧标签靠右对齐</h4><div class="example">
  <div class="row">
    <div class="col-md-6">
      <div class="input-control has-label-left">
        <input id="inputAccountExample3" type="text" class="form-control" placeholder="">
        <label for="inputAccountExample3" class="input-control-label-left text-right">用户名:</label>
      </div>
      <br>
      <div class="input-control has-label-left has-icon-right">
        <input id="inputEmailExample3" type="email" class="form-control" placeholder="">
        <label for="inputEmailExample3" class="input-control-label-left text-right">邮箱:</label>
        <label for="inputEmailExample3" class="input-control-icon-right"><i class="icon icon-check"></i></label>
      </div>
      <br>
      <div class="input-control has-label-left has-label-right">
        <input id="inputPasswordExample3" type="password" class="form-control" placeholder="">
        <label for="inputPasswordExample3" class="input-control-label-left text-right">密码:</label>
        <label for="inputPasswordExample3" class="input-control-label-right text-right text-success">安全!!!</label>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputAccountExample3"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputAccountExample3"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-left text-right"</span><span class="tag">&gt;</span><span class="pln">用户名:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left has-icon-right"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputEmailExample3"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputEmailExample3"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-left text-right"</span><span class="tag">&gt;</span><span class="pln">邮箱:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputEmailExample3"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-right"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-check"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left has-label-right"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputPasswordExample3"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputPasswordExample3"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-left text-right"</span><span class="tag">&gt;</span><span class="pln">密码:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputPasswordExample3"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-right text-right text-success"</span><span class="tag">&gt;</span><span class="pln">安全!!!</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>标签宽度尺寸</h4><div class="example">
  <div class="row">
    <div class="col-md-6">
      <p>使用 <code>.has-label-left-sm</code> 和 <code>.has-label-right-sm</code> 代替 <code>.has-label-left</code> 和 <code>.has-label-right</code> 使得标签占用较小的水平空间。</p>
      <div class="input-control has-label-left-sm">
        <input id="inputAccountExample4" type="text" class="form-control" placeholder="">
        <label for="inputAccountExample4" class="input-control-label-left text-right">用户名:</label>
      </div>
      <br>
      <div class="input-control has-label-left-sm has-icon-right-sm">
        <input id="inputEmailExample4" type="email" class="form-control" placeholder="">
        <label for="inputEmailExample4" class="input-control-label-left text-right">邮箱:</label>
        <label for="inputEmailExample4" class="input-control-icon-right"><i class="icon icon-check"></i></label>
      </div>
      <br>
      <div class="input-control has-label-left-sm has-label-right-sm">
        <input id="inputPasswordExample4" type="password" class="form-control" placeholder="">
        <label for="inputPasswordExample4" class="input-control-label-left text-right">密码:</label>
        <label for="inputPasswordExample4" class="input-control-label-right text-right text-success">安全!!!</label>
      </div>
    </div>
    <div class="col-md-6">
      <p>使用 <code>.has-label-left-lg</code> 和 <code>.has-label-right-lg</code> 代替 <code>.has-label-left</code> 和 <code>.has-label-right</code> 使得标签占用较大的水平空间。</p>
      <div class="input-control has-label-left-lg">
        <input id="inputAccountExample5" type="text" class="form-control" placeholder="">
        <label for="inputAccountExample5" class="input-control-label-left text-right">用户名:</label>
      </div>
      <br>
      <div class="input-control has-label-left-lg has-icon-right-lg">
        <input id="inputEmailExample5" type="email" class="form-control" placeholder="">
        <label for="inputEmailExample5" class="input-control-label-left text-right">邮箱:</label>
        <label for="inputEmailExample5" class="input-control-icon-right"><i class="icon icon-check"></i></label>
      </div>
      <br>
      <div class="input-control has-label-left-lg has-label-right-lg">
        <input id="inputPasswordExample5" type="password" class="form-control" placeholder="">
        <label for="inputPasswordExample5" class="input-control-label-left text-right">密码:</label>
        <label for="inputPasswordExample5" class="input-control-label-right text-right text-success">安全!!!</label>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left-sm"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-icon-right-sm"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left-sm has-label-right-sm"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left-lg"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-icon-right-lg"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left-lg has-label-right-lg"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>






<section><header><h3>搜索框</h3></header><article><p>为 <code>.input-control</code> 添加 <code>.search-box</code> 类并使用如下的 HTML 结构即可创建一个搜索框组件。
同时使用 <code>.search-box-circle</code> 能使得搜索框获得圆角边框外观。</p><p>如果要使用搜索框的 JavaScript 增强功能，请参考 <a href="#javascript/searchbox">JavaScript -&gt; 搜索框</a>。</p><div class="example">
  <div class="row">
    <div class="col-md-6">
      <div class="input-control search-box has-icon-left has-icon-right" id="searchboxExample">
        <input id="inputSearchExample1" type="search" class="form-control search-input" placeholder="搜索">
        <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-control search-box search-box-circle has-icon-left has-icon-right" id="searchboxExample">
        <input id="inputSearchExample2" type="search" class="form-control search-input" placeholder="搜索">
        <label for="inputSearchExample2" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control search-box has-icon-left has-icon-right"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"searchboxExample"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"search"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control search-input"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"搜索"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputSearchExample1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-left search-icon"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-search"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-right search-clear-btn"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-remove"</span><span class="tag">&gt;&lt;/i&gt;&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control search-box search-box-circle has-icon-left has-icon-right"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"searchboxExample"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputSearchExample1"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"search"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control search-input"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"搜索"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputSearchExample1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-left search-icon"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-search"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-right search-clear-btn"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-remove"</span><span class="tag">&gt;&lt;/i&gt;&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>禁用</h3></header><article><p>为 <code>.form-control</code> 添加 <code>disabled</code> 属性。</p><div class="example">
  <div class="row">
    <div class="col-md-6">
      <div class="input-control has-label-left">
        <input disabled="disabled" id="inputAccountExample6" type="text" class="form-control" placeholder="">
        <label for="inputAccountExample6" class="input-control-label-left">用户名:</label>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control has-label-left"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">disabled</span><span class="pun">=</span><span class="atv">"disabled"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputAccountExample4"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputAccountExample4"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-label-left"</span><span class="tag">&gt;</span><span class="pln">用户名:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section></div>
</section>
{/block}